<!-- by:Jie. 2018/4/18
    @param topBorder      [Boolean]  是否显示上边框
    @param bottomBorder   [Boolean]  是否显示下边框
    @param hasArrow       [Boolean]  是否显示右侧小箭头按钮
    @param title          [String]   标题文本
    @param disabeld       [Boolean]  是否禁用
    @param cellStyle      [Object]   cell样式
    @param cellClick      [function] cell单击事件
-->
<template>
  <div
    :class="['wxc-cello',topBorder && 'cell-top-border',bottomBorder && 'cell-bottom-border',!disabeld && 'cell-disabeld']"
    @click="cellClicked"
  >
    <div
      :class="['wxc-cell', hasTopBorder && 'cell-top-border', hasBottomBorder && !bottomBorder && 'cell-bottom-border', hasVerticalIndent && 'cell-indent', desc && 'has-desc']"
      :style="cellStyle"
      :accessible="autoAccessible"
      :aria-label="`${label},${title},${desc}`"
    >
      <slot name="label">
        <div v-if="label">
          <text class="cell-label-text">{{label}}</text>
        </div>
      </slot>
      <div class="cell-title">
        <slot name="title">
          <text class="cell-content">{{title}}</text>
          <text class="cell-desc-text" v-if="desc">{{desc}}</text>
        </slot>
      </div>
      <slot name="value"></slot>
      <slot></slot>
      <text class="iconfont cell-arrow-icon" v-if="hasArrow">&#xe6a1;</text>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    topBorder: {
      type: Boolean,
      default: false
    },
    bottomBorder: {
      type: Boolean,
      default: false
    },
    disabeld: {
      type: Boolean,
      default: false
    },
    hasTopBorder: {
      type: Boolean,
      default: false
    },
    hasBottomBorder: {
      type: Boolean,
      default: true
    },
    hasArrow: {
      type: Boolean,
      default: false
    },
    hasVerticalIndent: {
      type: Boolean,
      default: true
    },
    cellStyle: {
      type: Object,
      default: () => ({})
    },
    autoAccessible: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    cellClicked(e) {
      this.$emit("cellClick", { e });
    }
  }
};
</script>

<style scoped>
.iconfont {
  font-family: iconfont;
}
.wxc-cello {
  padding-left: 30px;
  background-color: #ffffff;
}
.wxc-cell {
  height: 100px;
  flex-direction: row;
  align-items: center;
  padding-right: 20px;
}
.cell-disabeld {
  background-color: #ffffff;
}
.cell-disabeld:active {
  background-color: #eee;
}
.cell-title {
  flex: 1;
}

.cell-indent {
  padding-bottom: 30px;
  padding-top: 30px;
}

.has-desc {
  padding-bottom: 18px;
  padding-top: 18px;
}

.cell-top-border {
  border-top-color: #e2e2e2;
  border-top-width: 1px;
}

.cell-bottom-border {
  border-bottom-color: #e2e2e2;
  border-bottom-width: 1px;
}

.cell-label-text {
  font-size: 30px;
  color: #666666;
  width: 188px;
  margin-right: 10px;
}

.cell-arrow-icon {
  color: #c1c1c1;
  font-size: 30px;
}

.cell-content {
  color: #333333;
  font-size: 30px;
  line-height: 40px;
}

.cell-desc-text {
  color: #999999;
  font-size: 24px;
  line-height: 30px;
  margin-top: 4px;
}
</style>